<template>
  <div class="activity-detail">
    <header>
      <webHader
        title="赛事详情"
        crumbs="主页,活动赛事,赛事详情"
        :backgroundImageUrl="headerBg"
      />
    </header>
    <div class="activity-main">
      <div class="web-main-title">欧冠前瞻：中日德兰两射手无缘次回合，埃因</div>
      <div class="web-main-date">2021-07-30</div>

      <el-tabs
        v-model="activeName"
        class="race-tabs"
        @tab-change="handleChange"
      >
        <el-tab-pane label="比赛介绍" name="introduce">
          <div class="race-tabs-item">
            中國香港游泳總會由沙理士太平紳士於1951年初成立並於1952年首次派出四名游泳運動員參與當時在赫爾辛基舉行的奧運會。泳總在1960年4月28日根據社團條例註冊，也是香港唯一受「世界泳聯」(“World
            Aquatics”)、「亞洲泳聯」(“Asia
            Aquatics”)及本地「中國香港體育協會暨奧林匹克委員會」(“SF &
            OC”)承認的游泳體育總會及為其會員，也是香港游泳運動，包括游泳、跳水、水球、韻律泳、公開水域泳/海泳及先進的監管機構。本會亦會遵守奧林匹克憲章、國際奧委會的操守守則、中國香港體育協會暨奧林匹克委員會、世界泳聯和亞洲泳聯的規章。
            泳總過去七十年透過籌組不同類型的比賽、訓練課程及教育活動去推動本地游泳活動，從而提升本地游泳水平、並培訓精英運動員及提供訓練予運動員、工作人員、裁判及教練。泳總現時有超過一百三十個屬會及超過一萬名註冊運動員，並提供機會予合規格的人士去代表香港參與無論在本地或外地舉行的各式各樣比賽及會議。
          </div>
        </el-tab-pane>
        <el-tab-pane label="比赛日程" name="schedule">
          <div class="race-tabs-item">
            <schedule />
          </div>
        </el-tab-pane>
        <el-tab-pane label="比赛结果" name="outcome">
          <div class="race-tabs-item">
            <outcome />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import headerBg from "~/assets/web/activity-header-bg.png";
const activeName = ref("introduce");
import schedule from "./components/schedule.vue";
import outcome from "./components/outcome.vue";

const handleChange = (val) => {};
</script>

<style lang="less" scoped>
.activity-detail {
  width: 100%;

  .activity-main {
    width: 100%;
    padding: 50px 154px 0;
    box-sizing: border-box;
    margin: 30px auto 60px;

    .web-main-title {
      font-family: PingFang HK, PingFang HK;
      font-weight: 500;
      font-size: 30px;
      color: #1e2021;
      text-align: left;
    }

    .web-main-date {
      font-family: PingFang HK, PingFang HK;
      font-weight: 400;
      font-size: 14px;
      color: #656c7e;
      text-align: left;
      margin: 30px 0 44px 0;
    }

    .race-tabs-item {
      box-sizing: border-box;
      font-family: PingFang HK, PingFang HK;
      font-weight: 400;
      font-size: 16px;
      color: #1e2021;
    }
  }
}
</style>

<style>
.race-tabs .el-tabs__nav-wrap:after {
  content: none !important;
}

.race-tabs .el-tabs__item {
  font-family: PingFang HK, PingFang HK;
  font-weight: 500;
  font-size: 16px;
  color: rgba(30, 32, 33, 0.7);
}

.race-tabs .el-tabs__item.is-active,
.el-tabs__item:hover {
  font-family: PingFang HK, PingFang HK;
  font-weight: 500;
  font-size: 16px;
  color: #1e2021;
}

.race-tabs .el-tabs__active-bar {
  background: var(--theme-gradient-bg);
}
</style>
